<template>
  <div style="top: 50px; position: relative">
    <h1>404 资源未找到</h1>
    <p class="zoom-area">很抱歉，您访问的资源未找到⊙﹏⊙∥</p>
    <div class="link-container">
      <a-button type="primary" @click="handleToHome">返回首页</a-button>
    </div>
    <section class="error-container">
      <span>4</span>
      <span><span class="screen-reader-text">0</span></span>
      <span>4</span>
    </section>
  </div>
</template>

<script>
export default {
  name: 'error-404',
  methods: {
    handleToHome () {
      this.$router.push({name: 'dashboard'})
    }
  }
}
</script>

<style scoped>
  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gTD_u50.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3g3D_u50.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gbD_u50.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gfD_u50.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gTD_u50.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3g3D_u50.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gbD_u50.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gfD_u50.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
  }

  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
  }

  @font-face {
    font-family: Catamaran;
    font-style: normal;
    font-weight: 400;
    src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r8zRAW_0.woff2) format('woff2');
    unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC
  }

  @font-face {
    font-family: Catamaran;
    font-style: normal;
    font-weight: 400;
    src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r6zRAW_0.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
  }

  @font-face {
    font-family: Catamaran;
    font-style: normal;
    font-weight: 400;
    src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r5TRA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
  }

  @font-face {
    font-family: Catamaran;
    font-style: normal;
    font-weight: 800;
    src: local('Catamaran ExtraBold'), local('Catamaran-ExtraBold'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0NIpQoyXQa2RxT7-5jQhJVctyB1Wk.woff2) format('woff2');
    unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC
  }

  @font-face {
    font-family: Catamaran;
    font-style: normal;
    font-weight: 800;
    src: local('Catamaran ExtraBold'), local('Catamaran-ExtraBold'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0NIpQoyXQa2RxT7-5jQhJVatyB1Wk.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
  }

  @font-face {
    font-family: Catamaran;
    font-style: normal;
    font-weight: 800;
    src: local('Catamaran ExtraBold'), local('Catamaran-ExtraBold'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0NIpQoyXQa2RxT7-5jQhJVZNyB.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
  }

  .error-container {
    text-align: center;
    font-size: 11rem;
    font-family: Catamaran, sans-serif;
    font-weight: 800
  }

  .error-container > span {
    display: inline-block;
    line-height: .7;
    position: relative;
    color: #ffb485
  }

  .error-container > span {
    display: inline-block;
    position: relative;
    vertical-align: middle
  }

  .error-container > span:nth-of-type(1) {
    color: #d1f2a5;
    animation: colordancing 4s infinite
  }

  .error-container > span:nth-of-type(3) {
    color: #f56991;
    animation: colordancing2 4s infinite
  }

  .error-container > span:nth-of-type(2) {
    width: 120px;
    height: 120px;
    border-radius: 999px
  }

  .error-container > span:nth-of-type(2):after, .error-container > span:nth-of-type(2):before {
    border-radius: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 999px;
    box-shadow: inset 30px 0 0 rgba(209, 242, 165, .4), inset 0 30px 0 rgba(239, 250, 180, .4), inset -30px 0 0 rgba(255, 196, 140, .4), inset 0 -30px 0 rgba(245, 105, 145, .4);
    animation: shadowsdancing 4s infinite
  }

  .error-container > span:nth-of-type(2):before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg)
  }

  .screen-reader-text {
    position: absolute;
    top: -9999em;
    left: -9999em
  }

  @keyframes shadowsdancing {
    0% {
      box-shadow: inset 30px 0 0 rgba(209, 242, 165, .4), inset 0 30px 0 rgba(239, 250, 180, .4), inset -30px 0 0 rgba(255, 196, 140, .4), inset 0 -30px 0 rgba(245, 105, 145, .4)
    }
    25% {
      box-shadow: inset 30px 0 0 rgba(245, 105, 145, .4), inset 0 30px 0 rgba(209, 242, 165, .4), inset -30px 0 0 rgba(239, 250, 180, .4), inset 0 -30px 0 rgba(255, 196, 140, .4)
    }
    50% {
      box-shadow: inset 30px 0 0 rgba(255, 196, 140, .4), inset 0 30px 0 rgba(245, 105, 145, .4), inset -30px 0 0 rgba(209, 242, 165, .4), inset 0 -30px 0 rgba(239, 250, 180, .4)
    }
    75% {
      box-shadow: inset 30px 0 0 rgba(239, 250, 180, .4), inset 0 30px 0 rgba(255, 196, 140, .4), inset -30px 0 0 rgba(245, 105, 145, .4), inset 0 -30px 0 rgba(209, 242, 165, .4)
    }
    100% {
      box-shadow: inset 30px 0 0 rgba(209, 242, 165, .4), inset 0 30px 0 rgba(239, 250, 180, .4), inset -30px 0 0 rgba(255, 196, 140, .4), inset 0 -30px 0 rgba(245, 105, 145, .4)
    }
  }

  @keyframes colordancing {
    0% {
      color: #d1f2a5
    }
    25% {
      color: #f56991
    }
    50% {
      color: #ffc48c
    }
    75% {
      color: #effab4
    }
    100% {
      color: #d1f2a5
    }
  }

  @keyframes colordancing2 {
    0% {
      color: #ffc48c
    }
    25% {
      color: #effab4
    }
    50% {
      color: #d1f2a5
    }
    75% {
      color: #f56991
    }
    100% {
      color: #ffc48c
    }
  }

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }

  body {
    background-color: #416475
  }

  button, html, input, select, textarea {
    font-family: Montserrat, Helvetica, sans-serif;
    color: #dfdfdf
  }

  h1 {
    text-align: center
  }

  .zoom-area {
    max-width: 490px;
    margin: 30px auto 30px;
    font-size: 19px;
    text-align: center
  }

  .link-container {
    text-align: center
  }

  a.more-link {
    text-transform: uppercase;
    font-size: 13px;
    background-color: #92a4ad;
    padding: 10px 15px;
    border-radius: 0;
    color: #f4f4f4;
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5;
    margin-top: 1rem;
    text-decoration: none;
    letter-spacing: 1px
  }

  a.more-link:hover {
    box-shadow: 0 0 2px #fff
  }
</style>
